import styles from "../index.module.less";
import { tableData } from "../table";
import { checkedAll } from "..";
import { drawerTitle, drawerVisible } from "../drawer";
export const cardListData = reactive<any>([]);

const cardListPage = renderTablePage({ total: 50 });
const showDrawer = () => (drawerVisible.value = true);
const handleDetail = () => {
  drawerTitle.value = "客户资料审核详情";
  showDrawer();
};
const renderCard = function (item) {
  const PosterCover =
    item.status === 1 ? (
      <a-image src={item.imageUrl} width="100%" height="200px" />
    ) : item.status === 2 ? (
      <video-player
        style="width: 100%; height: 200px;"
        v-model={item.videoUrl}
      />
    ) : item.index % 2 === 1 ? (
      <a-image src={item.imageUrl} width="100%" height="200px" />
    ) : (
      <video-player
        style="width: 100%; height: 200px;"
        v-model={item.videoUrl}
      />
    );
  return (
    <a-card
      class={styles.card_item}
      vSlots={{
        title: renderCheckBox(item, "checked", "客户资料"),
        extra: <i class="s-ffbb00 fs12">待审核</i>,
        cover: PosterCover,
      }}
      headStyle="padding: 0 12px"
      bodyStyle="padding: 12px"
      hoverable
      onChange={(e) => {
        tableData.value = cardListData.filter((item) => item.checked);
        checkedAll.value =
          tableData.value.length &&
          tableData.value.length === cardListData.length;
      }}
    >
      <p>上传时间：{item.aaaa}</p>
      <p>审核时间：{item.bbbb}</p>
      <p>
        审核依据：
        <a-space size={8}>
          <a-tag color="#ff0000" style="padding: 2px 4px;margin:0;">
            涉黄
          </a-tag>
          <span>{renderToolTip.call({ value: item.cccc, length: 4 })}</span>
        </a-space>
      </p>
      <p>
        <a-row>
          <a-col span={8}>
            <s-button
              type="link"
              style="color:#333333; margin:0; padding:0; border: none;"
              onClick={handleDetail}
            >
              详情
            </s-button>
          </a-col>
          <a-col span={8} style="color: #00dd00">
            正常
          </a-col>
          <a-col span={8} style="color: #dd0000">
            违规
          </a-col>
        </a-row>
      </p>
    </a-card>
  );
};
export default defineComponent({
  setup() {
    return () => (
      <div class={styles.check_detail_wrapper}>
        <div class={styles.cards}>
          {cardListData.map((item) => renderCard(item))}
        </div>
        <div class={styles.tablePage}>
          <a-pagination
            v-model:current={cardListPage.current}
            {...lodash.omit(cardListPage, ["current"])}
          />
        </div>
      </div>
    );
  },
});
